<template >
    <view class="pages" :style="style" >
        
        <view class="head" @click="setting()" >
            <my-header :bgCol="is_set?'':'#0000'" :isBack="is_set"  >
                <block slot="backText">返回</block>
                <block slot="content">{{is_set?'屏幕灯':''}}
                </block>
            </my-header>
                <!-- <view class="set" @click="setting()">设置</view> -->
        </view>
        <view class="text col" @click="taget(cur)" :style="'font-size:'+150/text.length+'vw;'">
            {{text}}
        </view>
    </view>
</template>

<script>
    export default {
		data() {
			return {
                style:"",
                cur:0,
                text:"",
                colorList:[
                ],
                auto:false,
                time:0,
                is_set:false
			}
		},
		onLoad() {
            this.initData()
        },
        onShow(){
            uni.setScreenBrightness({
                value: 1,
                success: function () {
                    console.log('success');
                }
            });
        },
		methods: {
			async initData(){
                let res=await uni.$request({},"api/screen")
                if (res.code==200) {
                    this.text=res.data.text
                    this.colorList=res.data.colorList
                    this.time=res.data.time
                    this.taget(0)
                    this.setting()
                }
				uni.getScreenBrightness({
                    success: function (res) {
                        console.log(res);
                        console.log('屏幕亮度值：' + res.value);
                    }
                });
            },
            taget(curs){
                let cur=curs>this.colorList.length-1?0:curs
                let item=this.colorList[cur]
                this.style=`background:${item.b_col};color:${item.c_col};`
                this.cur=cur+1
                if (this.time>0) {
                    setTimeout(() => {
                        this.taget(this.cur)
                    },this.time);
                }else{
                    if (this.is_set) {
                        this.is_set=false
                    }
                }
                
            },
            setting(){
                console.log(123);
                this.is_set=!this.is_set
            }
			
		}
	}
</script>
<style lang="scss">
    .text{
        position: fixed;
        top: 0rpx;
        left: 0rpx;
        width: 100%;
        height: 100%;
        font-size:150vw;
        justify-content: center;
        text-align: center;
        font-weight: 900;
    }
    .head{
        .set{
            font-size: 40rpx;
            margin-left: 200rpx;
        }
    }
    .hide{
           color: 0000;
    }
</style>